/**
 * Created by quxiangqian on 2018/7/2.
 */
import {ToolTip} from "../control/ToolTip";
export class ComBox extends React.Component {
    state={
        isShowPop:false,
        val:"",
        label:"",
        defaultinit:false,
        pos:0,
        error:false,
        message:""
    }

    showError=(message)=>{
        this.state.error=true;
        this.setState({error:true,message:message});
    }

    default=()=>{
        this.setState({error:false});
    }

    handMouseDown=(e)=>{
      $(this.rect).show();
      var e = event || window.event;
      let winHeight= $(window).height();
      if(e.clientY+$(this.rect).outerHeight()>winHeight){
         let po=$(this.rect).outerHeight()+"px"
         this.state.pos="-"+po;
         $(this.rect).css("top","-"+po);
      }else{
           let po=$(this.comp).height()+"px"
           this.state.pos=po;
         $(this.rect).css("top",po);
      }
      this.setState({pos:this.state.pos});
    }

    dropDownHide=(e)=>{
       $(this.rect).hide();
       this.setState({isShowPop:false});
     }

    setVal=(val,label,bl)=>{
       this.props.value=val;
       this.state.val=val;
       this.state={isShowPop:false,val:val,label:label};
       this.props.bind[this.props.name].value=val;
       this.setState(this.state);
    }
    componentDidMount(){
       this.state.defaultinit=true;
    }
    ico=()=>{
      if(this.props.ico){
        return this.props.ico;
      }
      return "fas fa-angle-down";
    }

    comBoxElement=(props)=>{
      let textprops={};
      if(this.props.readOnly===true){
          textprops.readOnly=true;
      }
      textprops.value=this.state.label
      if(this.props.value){
          this.state.val=this.props.value;
      }

      return <div className="combox form-control" style={props.style} ref={r=>this.comp=r} onMouseDown={this.handMouseDown} onMouseLeave={this.dropDownHide}>
          <input type="text" {...textprops}/><b onMouseDown={this.handMouseDown}><i className={this.ico()}></i></b>
          {

                 <p className="rect" ref={r=>this.rect=r} onMouseLeave={this.dropDownHide} onMouseDown={(e)=>{
                   e.stopPropagation();
                   e.nativeEvent.stopImmediatePropagation();
                 }} style={{display:"none",top:this.state.pos}}>
                  {React.Children.map(this.props.children,(child)=>{
                          child.props.comBoxVal=this.setVal;
                          child.props.hide=this.dropDownHide;
                          child.props.defval=this.state.val;
                          child.props.defaultinit=this.state.defaultinit

                      return child;
                  })}
                </p>
          }
      </div>
    }

    render(){

        let item= this.props.bind[this.props.name];
        if(item.value&&item.value!==""){
            this.state.val=item.value;
        }
        item.showError=this.showError;
        item.default=this.default;

        let style={}
        let ComBoxElement=this.comBoxElement;
        if(this.state.error===true){
            style.borderColor="red";
           return <ToolTip text={this.state.message} css="error" pos="right">
              {ComBoxElement({style:style})}
           </ToolTip>
        }
        return <ComBoxElement/>
    }
}
